<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="left">
				<u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
			</view>
			<view class="title">健康画像</view>
			<view class="right"></view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content">
			<!-- 基础健康指标 -->
			<view class="section">
				<view class="section-title">基础健康指标</view>
				<view class="metrics-grid">
					<view class="metric-item">
						<text class="value">{{healthData.bmi || '--'}}</text>
						<text class="label">BMI指数</text>
						<text class="status" :class="healthData.bmiStatus">{{healthData.bmiText}}</text>
					</view>
					<view class="metric-item">
						<text class="value">{{healthData.bloodPressure || '--'}}</text>
						<text class="label">血压(mmHg)</text>
						<text class="status" :class="healthData.bloodPressureStatus">{{healthData.bloodPressureText}}</text>
					</view>
					<view class="metric-item">
						<text class="value">{{healthData.bloodSugar || '--'}}</text>
						<text class="label">血糖(mmol/L)</text>
						<text class="status" :class="healthData.bloodSugarStatus">{{healthData.bloodSugarText}}</text>
					</view>
					<view class="metric-item">
						<text class="value">{{healthData.heartRate || '--'}}</text>
						<text class="label">心率(次/分)</text>
						<text class="status" :class="healthData.heartRateStatus">{{healthData.heartRateText}}</text>
					</view>
				</view>
			</view>
			
			<!-- 生活习惯评估 -->
			<view class="section">
				<view class="section-title">生活习惯评估</view>
				<view class="habit-list">
					<view class="habit-item" v-for="(item, index) in habits" :key="index">
						<view class="left">
							<text class="title">{{item.title}}</text>
							<text class="desc">{{item.description}}</text>
						</view>
						<view class="right">
							<u-icon :name="item.score >= 60 ? 'checkmark-circle' : 'close-circle'" 
								:color="item.score >= 60 ? '#52c41a' : '#ff4d4f'" 
								size="40"></u-icon>
							<text class="score" :class="{'good': item.score >= 60}">{{item.score}}分</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 健康建议 -->
			<view class="section">
				<view class="section-title">健康建议</view>
				<view class="advice-list">
					<view class="advice-item" v-for="(item, index) in advice" :key="index">
						<u-icon :name="item.icon" size="32" :color="item.color"></u-icon>
						<text class="text">{{item.text}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				healthData: {
					bmi: '23.5',
					bmiStatus: 'normal',
					bmiText: '正常',
					bloodPressure: '120/80',
					bloodPressureStatus: 'normal',
					bloodPressureText: '正常',
					bloodSugar: '5.6',
					bloodSugarStatus: 'normal',
					bloodSugarText: '正常',
					heartRate: '75',
					heartRateStatus: 'normal',
					heartRateText: '正常'
				},
				habits: [{
					title: '运动习惯',
					description: '每周运动3-5次，每次30分钟以上',
					score: 80
				}, {
					title: '饮食习惯',
					description: '三餐规律，注意营养均衡',
					score: 75
				}, {
					title: '睡眠质量',
					description: '每天保持7-8小时睡眠',
					score: 65
				}, {
					title: '压力管理',
					description: '工作生活压力适中，偶有焦虑',
					score: 55
				}],
				advice: [{
					icon: 'heart',
					color: '#ff4d4f',
					text: '建议每天进行30分钟以上的有氧运动，如快走、慢跑等'
				}, {
					icon: 'calendar',
					color: '#1890ff',
					text: '保持规律作息，每天保证7-8小时充足睡眠'
				}, {
					icon: 'star',
					color: '#52c41a',
					text: '注意饮食均衡，多吃蔬菜水果，控制盐分摄入'
				}, {
					icon: 'chat',
					color: '#faad14',
					text: '学习压力管理技巧，保持心情愉悦'
				}]
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #F7F7FA;
		
		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.content {
			padding: 30rpx;
			
			.section {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				
				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 30rpx;
				}
				
				.metrics-grid {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 20rpx;
					
					.metric-item {
						background-color: #F7F7FA;
						border-radius: 12rpx;
						padding: 20rpx;
						text-align: center;
						
						.value {
							font-size: 36rpx;
							font-weight: bold;
							color: #333;
							display: block;
							margin-bottom: 10rpx;
						}
						
						.label {
							font-size: 24rpx;
							color: #666;
							display: block;
							margin-bottom: 10rpx;
						}
						
						.status {
							font-size: 24rpx;
							padding: 4rpx 12rpx;
							border-radius: 20rpx;
							
							&.normal {
								color: #52c41a;
								background-color: #f6ffed;
							}
							
							&.warning {
								color: #faad14;
								background-color: #fffbe6;
							}
							
							&.danger {
								color: #ff4d4f;
								background-color: #fff2f0;
							}
						}
					}
				}
				
				.habit-list {
					.habit-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 20rpx 0;
						border-bottom: 2rpx solid #f5f5f5;
						
						&:last-child {
							border-bottom: none;
						}
						
						.left {
							flex: 1;
							margin-right: 20rpx;
							
							.title {
								font-size: 28rpx;
								color: #333;
								margin-bottom: 8rpx;
								display: block;
							}
							
							.desc {
								font-size: 24rpx;
								color: #999;
							}
						}
						
						.right {
							display: flex;
							align-items: center;
							
							.score {
								font-size: 28rpx;
								color: #ff4d4f;
								margin-left: 10rpx;
								
								&.good {
									color: #52c41a;
								}
							}
						}
					}
				}
				
				.advice-list {
					.advice-item {
						display: flex;
						align-items: center;
						padding: 20rpx 0;
						
						.text {
							font-size: 28rpx;
							color: #333;
							margin-left: 20rpx;
							flex: 1;
						}
					}
				}
			}
		}
	}
</style> 